import {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useMemo,
  useState,
} from "react";
import teamService from "@/api/services/mes/teamService";
import { TableToolbar } from "@/components/grid/TableToolbar";
import { Button } from "antd";
import Table, { type ColumnsType } from "antd/es/table";
import { toast } from "sonner";
import type { MesTeamMember } from "./entity";
import MultiUserSelector from "@/pages/components/selector/MultiUserSelect";
import type { UserInfo } from "#/entity";

interface MesTeamMemberProps {
  parentId?: React.Key;
}

export interface MesTeamMemberHandles {
  getAddList: () => MesTeamMember[];
  getUpdateList: () => MesTeamMember[];
  getDeleteIds: () => React.Key[];
}

const MesTeamMemberPage = forwardRef<MesTeamMemberHandles, MesTeamMemberProps>(
  ({ parentId }, ref) => {
    const [loading, setLoading] = useState(false);
    const [list, setList] = useState<MesTeamMember[]>([]);
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 添加一个状态来跟踪临时ID
    const [tempIds, setTempIds] = useState<React.Key[]>([]);
    const [addList, setAddList] = useState<MesTeamMember[]>([]);
    const [updateList, setUpdateList] = useState<MesTeamMember[]>([]);
    const [deleteIds, setDeleteIds] = useState<React.Key[]>([]);

    const [selectVisiable, setSelectVisiable] = useState(false);

    useImperativeHandle(
      ref,
      () => ({
        getAddList: () => addList,
        getUpdateList: () => updateList,
        getDeleteIds: () => deleteIds,
      }),
      [addList, updateList, deleteIds]
    );

    useEffect(() => {
      const newAddList = list.filter(
        (item) => item.id && tempIds.includes(item.id)
      );
      setAddList(newAddList);
      const updateList = list.filter(
        (item) => item.id && !tempIds.includes(item.id)
      );
      setUpdateList(updateList);
    }, [list]);

    const [tableSize, setTableSize] = useState<"large" | "middle" | "small">(
      "middle"
    );

    //动态设置表格高度
    const [tableScrollY, setTableScrollY] = useState(0);
    const PAGE_OFFSET_HEIGHT = 403;
    const updateTableHeight = () => {
      const newHeight = window.innerHeight - PAGE_OFFSET_HEIGHT;
      setTableScrollY(newHeight > 200 ? newHeight : 200); // 保证最小高度
    };

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    useEffect(() => {
      updateTableHeight(); // 初始化
      window.addEventListener("resize", updateTableHeight);
      return () => window.removeEventListener("resize", updateTableHeight);
    }, []);

    //表格列定义
    const columns: ColumnsType<MesTeamMember> = [
      { key: "account", title: "账号", dataIndex: "account" },
      { key: "name", title: "姓名", dataIndex: "name" },
      { key: "phone", title: "手机号", dataIndex: "phone" },
    ];

    const [selectedValues, setSelectedValues] = useState<string[]>(() =>
      columns
        .filter((col) => col.key !== "operation")
        .map((col) => (col.key ? String(col.key) : ""))
    );

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    const filteredColumns = useMemo(() => {
      return [
        ...columns.filter(
          (col) =>
            selectedValues.includes(String(col.key)) || col.key === "operation"
        ),
      ].sort((a, b) => {
        const originalIndex = columns.findIndex((c) => c.key === a.key);
        const targetIndex = columns.findIndex((c) => c.key === b.key);
        return originalIndex - targetIndex;
      });
    }, [selectedValues]);

    //加载表格数据
    const fetchList = () => {
      if (!parentId) return;

      setLoading(true);
      teamService
        .getTeamMembers(parentId)
        .then((res) => {
          setList(res);
        })
        .catch((error) => {
          console.log(error);
          toast.error("获取数据失败！", error);
        })
        .finally(() => {
          setLoading(false);
        });
    };

    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
    useEffect(() => {
      if (parentId) {
        fetchList();
      } else {
        // 初始化时清空状态
        setList([]);
        setSelectedRowKeys([]);
        setTempIds([]);
        setAddList([]);
        setUpdateList([]);
        setDeleteIds([]);
      }
    }, [parentId]);

    const handleAdd = () => {
      setSelectVisiable(true);
    };

    // 在删除方法中修改判断逻辑
    const handleDelete = () => {
      // 如果没有选中行，直接返回
      if (selectedRowKeys.length === 0) {
        return;
      }

      // 更新删除ID列表
      const newDeleteIds = [...deleteIds];

      // 将已有ID但不在deleteIds中的ID添加到deleteIds
      for (const key of selectedRowKeys) {
        const item = list.find((item) => item.id === key);
        if (item?.id && !tempIds.includes(item.id)) {
          // 如果不在临时ID列表中，则添加到删除列表
          if (!newDeleteIds.includes(item.id)) {
            newDeleteIds.push(item.id);
          }
        }
      }

      // 更新deleteIds状态
      setDeleteIds(newDeleteIds);

      // 从列表中移除选中的行
      setList((prevList) =>
        prevList.filter((item) => !selectedRowKeys.includes(item.id))
      );
      // 从tempIds中移除被删除的临时ID
      setTempIds((prevTempIds) =>
        prevTempIds.filter((id) => !selectedRowKeys.includes(id))
      );
      // 清空选中状态
      setSelectedRowKeys([]);
    };

    const handleSelect = (selectedUsers: UserInfo[]) => {
      // 先获取已存在的 userId 列表
      const existUserIds = list.map((item) => item.userId);

      // 只添加不存在于 list 中的 user
      const newUserList: MesTeamMember[] = selectedUsers
        .filter((user) => !existUserIds.includes(user.id))
        .map((user) => ({
          id: user.id, // 使用临时ID
          teamId: parentId,
          userId: user.id,
          account: user.account,
          name: user.name,
          phone: user.phone,
        }));

      setList((prevList) => [...prevList, ...newUserList]);
      // 添加到临时ID列表
      const newTempIds = newUserList.map((item) => item.id);
      setTempIds((prev) => [...prev, ...newTempIds]);

      setSelectVisiable(false);
    };

    return (
      <>
        <div className="flex justify-between mb-4">
          <div className="flex gap-2">
            <Button type="primary" onClick={handleAdd}>
              新增
            </Button>
            <Button
              danger
              disabled={selectedRowKeys.length === 0}
              onClick={handleDelete}
            >
              删除
            </Button>
          </div>
          <TableToolbar
            onRefresh={() => fetchList()}
            onSizeChange={setTableSize}
            columns={columns}
            selectedValues={selectedValues}
            onColumnChange={setSelectedValues}
          />
        </div>
        <Table
          rowKey="id"
          size={tableSize}
          scroll={{ x: "max-content", y: tableScrollY }}
          loading={loading}
          pagination={false}
          columns={filteredColumns}
          dataSource={list}
          rowSelection={{
            type: "checkbox",
            selectedRowKeys: selectedRowKeys,
            onChange: (selectedKeys) => {
              setSelectedRowKeys(selectedKeys as React.Key[]);
            },
          }}
        />

        <MultiUserSelector
          open={selectVisiable}
          relateTableName="mes_team_member"
          bizId={parentId}
          relateFiled="team_id"
          onCancel={() => setSelectVisiable(false)}
          onOk={(selectUsers) => handleSelect(selectUsers)}
        />
      </>
    );
  }
);

export default MesTeamMemberPage;
